<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'weather.jsp' starting page</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  </head>
  
  <body>
  <select id="city">
  	<option>--选择城市--</option>
  	<option value="jiaozuo">焦作</option>
  	<option value="beijing">北京</option>
  	<option value="shanghai">上海</option>
  	<option value="shenzhen">深圳</option>
  </select>
  
  <div id="weather">
  	
  </div>
  
  
  <script type="text/javascript">
  	
	  $(document).ready(function(){
		  
		  $("#city").change(function(){
			  
			  $.get("google.jspx",{city:$("#city").val()},function(xml){
				  
				  $(xml).find("forecast_conditions").each(function(){
					  
					  var day = $(this).find("day_of_week").attr("data");
					  var low = $(this).find("low").attr("data");
					  var high  = $(this).find("high ").attr("data");
					  var icon  = $(this).find("icon ").attr("data");
					  var condition  = $(this).find("condition ").attr("data");
					  
					  $("<div><img src='http://www.google.com"+icon+"'/><h4>最低温度:"+low+"<h4></div>").appendTo($("#weather"));
					  
				  });
				  
			  });
			  
		  });
		  
	  });
	
  </script>
  </body>
</html>
